import * as React from 'react';
import TableList from './TableList'
import { useMount } from 'ahooks';
import { connect, ConnectRC } from 'umi';
import { IPro } from './pro';
import { Button } from 'antd'
export interface IProListProps {
  proList: IPro[]
}

const ProList: ConnectRC<IProListProps>  =  (props) => {
  useMount(() => {
    props.dispatch({
      type: 'pro/getProListEffect',
      payload: { limitNum: 200 }
    })
  })
  return (
    <div>
      <Button onClick = { () => {
        // 深拷贝数据
        const arr = JSON.parse(JSON.stringify(props.proList))
        arr.sort((a: IPro, b: IPro) => {
          return a.originprice - b.originprice
        })
        // 修改状态管理器数据
        props.dispatch({
          type: 'pro/changeProList',
          payload: arr
        })
      }}>价格升序</Button>
      <Button onClick = { () => {
        // 深拷贝数据
        const arr = JSON.parse(JSON.stringify(props.proList))
        arr.sort((a: IPro, b: IPro) => {
          return b.originprice - a.originprice
        })
        // 修改状态管理器数据
        props.dispatch({
          type: 'pro/changeProList',
          payload: arr
        })
      }}>价格降序</Button>
      <TableList dataSource = { props.proList }/>
    </div>
  );
}

export default connect((state: any) => {
  return {
    proList: state.pro.proList
  }
})(ProList)
